// 硬盘
<template>
  <div>
    <!-- 硬盘空间 -->
    <div class="bg-fff pAll mb_10 contentList">
      <div class="header">
        <span>硬盘空间</span>
      </div>
      <echarts-load v-if="hardDiskFlag2 || reload_hardDisk2" :chartFlag="hardDiskFlag2" :reload="reload_hardDisk2" @refreshF="refreshDl2" />
      <el-row v-else class="toggleList ypkj">
        <el-col :span="6" v-for="(item, index) in hardDisk_list" :key="index">
          <div class="toggleItem">
            <h2>{{ item.name }}</h2>
            <div class="hardDiskText">
              <span class="hardDiskOccupy">{{ item.usedSize }}</span>
              <span>
                GB<i> / {{ item.totalSize }} GB</i></span
              >
            </div>
            <el-progress :percentage="item.percentageVal" :show-text="false" :stroke-width="12"></el-progress>
            <ul class="tipsText">
              <li><i></i><span>已使用</span></li>
              <li><i></i><span>总空间</span></li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 硬盘读写率 -->
    <div class="bg-fff pAll mb_10 contentList">
      <div class="header">
        <span>硬盘读写率</span>
      </div>
      <div style="height: 395px">
        <echarts-load v-if="hardDiskFlag1 || reload_hardDisk1" :chartFlag="hardDiskFlag1" :reload="reload_hardDisk1" @refreshF="refreshDl1" />
        <div v-else>
          <el-row class="toggleList">
            <el-col :span="12">
              <div class="toggleItem">
                <h2>硬盘读取率（disk read rate）</h2>
                <el-row class="item_param">
                  <el-col :span="12">
                    <div>
                      <p>最新值：{{ list1.read.last }} MB/s</p>
                      <p>平均值：{{ list1.read.avg }} MB/s</p>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <p>最小值：{{ list1.read.min }} MB/s</p>
                      <p>最大值：{{ list1.read.max }} MB/s</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="toggleItem">
                <h2>硬盘写入率（disk write rate）</h2>
                <el-row class="item_param">
                  <el-col :span="12">
                    <div>
                      <p>最新值：{{ list1.write.last }} MB/s</p>
                      <p>平均值：{{ list1.write.avg }} MB/s</p>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <p>最小值：{{ list1.write.min }} MB/s</p>
                      <p>最大值：{{ list1.write.max }} MB/s</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <div>
            <!-- <echarts-load v-if="hardDiskFlag1 || reload_hardDisk1" :chartFlag="hardDiskFlag1" :reload="reload_hardDisk1" @refreshF="refreshDl1" /> -->
            <!-- <cpu-line v-else :chartsData="echartData_hardDisk1" /> -->
            <cpu-line :chartsData="echartData_hardDisk1" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { timeLoad } from '@/assets/js/setTime'
import cpuLine from '@/components/Echarts/cloudEcharts/cpuLine'
import echartsLoad from '@/components/Echarts/echartsLoad'
import { accDiv, accMul } from '@/assets/js/videoTab.js'
export default {
  data() {
    return {
      searchCondition: {},
      hardDiskFlag1: false,
      reload_hardDisk1: false,
      hardDiskTime1: null,
      echartData_hardDisk1: {},
      list1: {
        read: { min: '', avg: '', last: '', max: '' }, // 读取
        write: { min: '', avg: '', last: '', max: '' }, // 写入
      },
      hardDiskFlag2: false,
      reload_hardDisk2: false,
      hardDiskTime2: null,
      hardDisk_list: [],
      initInterval: null,
    }
  },
  components: { cpuLine, echartsLoad },
  props: ['childData'],
  watch: {
    childData: {
      deep: true,
      handler(newVal, oldVal) {
        this.searchCondition = newVal
        this.initList_findSpeed() // 硬盘读写率
        this.initList_findSpace() // 硬盘空间
        if (newVal.type === 'change') {
          clearInterval(this.initInterval)
        }
      },
    },
    hardDiskFlag1(newVal, oldVal) {
      this.hardDiskTime1 = setTimeout(() => {
        if (this.hardDiskFlag1) {
          this.hardDiskFlag1 = false
          this.reload_hardDisk1 = true
        }
      }, timeLoad)
    },
    hardDiskFlag2(newVal, oldVal) {
      this.hardDiskTime2 = setTimeout(() => {
        if (this.hardDiskFlag2) {
          this.hardDiskFlag2 = false
          this.reload_hardDisk2 = true
        }
      }, timeLoad)
    },
  },
  created() {
    this.searchCondition = this.childData
    this.initList_findSpeed() // 硬盘读写率
    this.initList_findSpace() // 硬盘空间
    if (this.searchCondition.type !== 'change') {
      this.initInterval = setInterval(() => {
        this.getSearchTime()
        this.initList_findSpeed() // 硬盘读写率
        this.initList_findSpace() // 硬盘空间
      }, 1000 * 30)
    }
  },
  methods: {
    // 获取时间
    getSearchTime() {
      var difference = new Date(this.searchCondition.endDate).getTime() - new Date(this.searchCondition.startDate).getTime()
      var startDate = this.initTime(new Date(new Date().getTime() - difference))
      var endDate = this.initTime(new Date())
      // console.log(startDate, '----', endDate)
      this.childValue = {
        startDate: startDate, // 开始日期、(yyyy-MM-dd HH:mm:ss)
        endDate: endDate, // 结束日期、(yyyy-MM-dd HH:mm:ss)
        type: '',
      }
      this.$emit('childByValue', this.childValue)
    },
    initTime(date) {
      const Y = date.getFullYear()
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      var m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      var s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s // yyyy-MM-dd HH:mm:ss
    },
    // 硬盘空间
    async initList_findSpace() {
      clearTimeout(this.hardDiskTime2)
      this.hardDiskFlag2 = true
      this.reload_hardDisk2 = false
      const params = new URLSearchParams()
      params.append('relSerialNo', this.$route.query.relSerialNo) // 主机流水号
      const { data: res } = await this.$http.post('snmp/diskLog/findSpace', params)
      this.hardDiskFlag2 = false
      this.reload_hardDisk2 = false
      switch (res.code) {
        case '0000':
          var list = []
          res.data.forEach((item) => {
            var conversionRate_2 = accMul(1024, 1024)
            var conversionRate = accMul(conversionRate_2, 1024) // b换算为GB
            var totalSize = accDiv(item.totalSize, conversionRate).toFixed(2) // 总空间
            var usedSize = accDiv(item.usedSize, conversionRate).toFixed(2) // 已使用空间
            var percentageVal1 = accDiv(item.usedSize, item.totalSize)
            var percentageVal = accMul(percentageVal1, 100)
            var list_item = {
              deleteFlag: item.deleteFlag,
              id: item.id,
              name: item.name,
              relSerialNo: item.relSerialNo,
              serialNo: item.serialNo,
              totalSize: totalSize,
              usedSize: usedSize,
              percentageVal: percentageVal,
            }
            list.push(list_item)
          })
          this.hardDisk_list = list
          break
        default:
          this.hardDisk_list = []
          this.hardDiskFlag2 = false
          this.reload_hardDisk2 = true
          break
      }
    },
    refreshDl2() {
      this.reload_hardDisk2 = false
      this.initList_findSpace()
    },
    // 硬盘读写率
    async initList_findSpeed() {
      clearTimeout(this.hardDiskTime1)
      this.hardDiskFlag1 = true
      this.reload_hardDisk1 = false
      const params = new URLSearchParams()
      params.append('relSerialNo', this.$route.query.relSerialNo) // 主机流水号
      params.append('startDate', this.searchCondition.startDate) // 开始日期、(yyyy-MM-dd HH:mm:ss)
      params.append('endDate', this.searchCondition.endDate) // 结束日期、(yyyy-MM-dd HH:mm:ss)
      const { data: res } = await this.$http.post('snmp/diskLog/findSpeed', params)
      this.hardDiskFlag1 = false
      this.reload_hardDisk1 = false
      switch (res.code) {
        case '0000':
          console.log(res.data.details)
          var detailsList_read = res.data.details.read
          var detailsList_write = res.data.details.write
          for (var k in detailsList_read) {
            detailsList_read[k] = (detailsList_read[k] / 1000).toFixed(2)
          }
          for (var v in detailsList_write) {
            detailsList_write[v] = (detailsList_write[v] / 1000).toFixed(2)
          }
          this.list1 = {
            read: detailsList_read,
            write: detailsList_write,
          }
          var xData = []
          var timeList = {
            read: [],
            write: [],
          }
          var list = {
            read: '硬盘读取率（disk read rate）',
            write: '硬盘写入率（disk write rate）',
          }
          res.data.list.forEach((item, index) => {
            var time = new Date(item.createDate)
            xData.push(this.getTime(time))
            timeList.read.push((item.readRate / 1000).toFixed(2)) // 读取
            timeList.write.push((item.writeRate / 1000).toFixed(2)) // 写入
          })
          var seriesDate = []
          for (const k in list) {
            seriesDate.push({
              name: list[k],
              type: 'line',
              //   stack: '总量',
              data: timeList[k],
            })
          }
          this.echartData_hardDisk1 = {
            id: 'hardDisk_line1',
            type: 'green',
            xData: xData,
            legendData: ['硬盘读取率（disk read rate）', '硬盘写入率（disk write rate）'],
            seriesDate: seriesDate,
            unit: ' MB/s',
          }
          break
        default:
          this.echartData_hardDisk1 = {
            id: 'hardDisk_line1',
            type: 'green',
            xData: [],
            legendData: [],
            seriesDate: [],
            unit: ' MB/s',
          }
          this.hardDiskFlag1 = false
          this.reload_hardDisk1 = true
          break
      }
    },
    refreshDl1() {
      this.reload_hardDisk1 = false
      this.initList_findSpeed()
    },
    // 格式化时间
    getTime(date) {
      const Y = date.getFullYear()
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      var m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      var s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s // yyyy-MM-dd HH:mm:ss
    },
  },
  destroyed() {
    clearInterval(this.initInterval)
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/cloudDetails.scss';
.contentList .toggleList .toggleItem > h2 {
  color: #5c6879;
}
::v-deep .el-progress-bar__inner {
  background: linear-gradient(to right, #6ee37d 0%, #31ba96 100%);
  background: -moz-linear-gradient(right, #6ee37d 0%, #31ba96 100%);
  background: -webkit-linear-gradient(right, #6ee37d 0%, #31ba96 100%);
  background: -o-linear-gradient(right, #6ee37d 0%, #31ba96 100%);
  background: -ms-linear-gradient(right, #6ee37d 0%, #31ba96 100%);
}
.contentList .ypkj .toggleItem {
  border-radius: 0px;
  padding: 15px;
}
</style>
